<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@taglib uri="/WEB-INF/smartcomm.tld" prefix="wf" %>
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8" />
    <title>智慧社区-物业管理</title>

    <meta name="description" content="Dashboard" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/resource/assets/img/favicon.png" type="image/x-icon">

    <!--Basic Styles-->
    <link href="${pageContext.request.contextPath}/resource/assets/css/bootstrap.min.css" rel="stylesheet" />
    <link href="${pageContext.request.contextPath}/resource/assets/css/font-awesome.min.css" rel="stylesheet" />

    <!--Beyond styles-->
    <link href="${pageContext.request.contextPath}/resource/assets/css/beyond.min.css" rel="stylesheet" type="text/css" />
    <link href="${pageContext.request.contextPath}/resource/assets/css/animate.min.css" rel="stylesheet" />
<script src="${pageContext.request.contextPath}/resource/assets/js/skins.min.js"></script>
</head>
<body>
<%@include file="../header.jsp" %>
	<!-- Main Container -->
    <div class="main-container container-fluid">
        <!-- Page Container -->
        <div class="page-container">
            <!-- Page Sidebar -->
            <%@include file="../nav.jsp" %><!-- /Page Sidebar -->
            <!-- Page Content -->
            <div class="page-content">
                <!-- Page Breadcrumb -->
                <div class="page-breadcrumbs">
                    <ul class="breadcrumb" style="margin-top: 8px;">
                        <li>
                            <i class="fa fa-home"></i>
                            <a href="#">智慧社区</a>
                        </li>
                        <li class="active">首页</li>
                    </ul>
                </div><!-- /Page Breadcrumb -->
                <!-- Page Header -->
                <div class="page-header position-relative">
                    <div class="header-title" style="margin-top: 2px;">
                        <h1>
                            首页
                        </h1>
                    </div><!--Header Buttons-->
                    <div class="header-buttons">
                        <a class="sidebar-toggler" href="#">
                            <i class="fa fa-arrows-h"></i>
                        </a>
                        <a class="refresh" id="refresh-toggler" href="">
                            <i class="glyphicon glyphicon-refresh"></i>
                        </a>
                        <a class="fullscreen" id="fullscreen-toggler" href="#">
                            <i class="glyphicon glyphicon-fullscreen"></i>
                        </a>
                    </div><!--Header Buttons End-->
                </div><!-- /Page Header -->
                <!-- Page Body -->
                <div class="page-body">
                <div class="well with-header">
                                        <div class="header bordered-palegreen">用户报修详情</div>
                                        <ul class="timeline">
                        <li class="timeline-node">
                            <a class="btn btn-danger">
                            	<wf:datetime timestamp="${complain.createdAt }" format="yyyy-MM-dd"></wf:datetime>
                            </a>
                        </li>
                        <li class="timeline-inverted">
                           
                            <div class="timeline-badge bg-blue">
                                <i class="fa fa-user"></i>
                            </div>
                            
                            <div class="timeline-panel bordered-top-3 bordered-blue">
                            	<div class="timeline-header bordered-bottom bordered-blue">
	                                    <span class="timeline-title">
	                                        ${complain.user.name } : ${complain.subject }
	                                    </span>
	                                </div>
	                                <div class="timeline-body">
	                                    <p>${complain.content }</p>
	                                </div>
	                                <div class="timeline-footer" style="text-align: right; ">
	                                	<span class="time"><i class="fa fa-clock-o"></i> <wf:datetime timestamp="${complain.createdAt }" format="HH:mm:ss"></wf:datetime></span>
	                                </div>
                            </div>
                        </li>
                        <li class="timeline-inverted">
                           
                            <div class="timeline-badge bg-palegreen">
                                <i class="fa fa-clock-o"></i>
                            </div>
                            <div class="timeline-panel bordered-top-3 bordered-palegreen">
	                            <div class="timeline-header bordered-bottom bordered-blue">
	                                    <span class="timeline-title">
	                                        处理状态 ：
	                                    </span>
	                                </div>
	                                <div class="timeline-body">
	                                    <c:if test="${complain.status == 0}">
					                    	待处理
					                    </c:if>
					                      <c:if test="${complain.status == 1}">
					                    	处理中
					                    </c:if>
	                                </div>
	                                 <div class="timeline-footer" style="text-align: right; ">
	                                	<span class="time"><i class="fa fa-clock-o"></i> <wf:datetime timestamp="${complain.createdAt }" format="HH:mm:ss"></wf:datetime></span>
	                                </div>
                            </div>
                        </li>
                        <li class="timeline-inverted">
                           
                            <div class="timeline-badge bg-pink">
                                <i class="fa fa-camera"></i>
                            </div>
                            <div class="timeline-panel bordered-top-3 bordered-pink">
	                            <div class="timeline-header bordered-bottom bordered-blue">
	                                    <span class="timeline-title">
	                                       实景照片 :
	                                    </span>
	                                </div>
	                                <div class="timeline-body">
		                                <div class="tl-wide text-center" style="padding: 5px; margin-top:10px; margin-bottom: 10px;">
	                                       <c:forEach var="image" items="${complain.thumbImages }">
						                      <a href="${fn:replace(image.url,'thumbImages','images') } "><img src="${image.url }" alt="..." class='margin' /></a>
						                    </c:forEach>
	                                    </div>
	                                </div>
	                                 <div class="timeline-footer" style="text-align: right; ">
	                                	<span class="time"><i class="fa fa-clock-o"></i> <wf:datetime timestamp="${complain.createdAt }" format="HH:mm:ss"></wf:datetime></span>
	                                </div>
                            </div>
                        </li>
                         <c:forEach var="feedback" items="${feedbacks }">
                         <li class="timeline-inverted">
                           
                            <div class="timeline-badge bg-yellow">
                                <i class="fa fa-comments"></i>
                            </div>
                            <div class="timeline-panel bordered-top-3 bordered-yellow">
	                            <div class="timeline-header bordered-bottom bordered-yellow">
	                                    <span class="timeline-title">
	                                       历史回复 :
	                                    </span>
	                                </div>
	                                <div class="timeline-body">
	                                     ${feedback.content }
	                                </div>
	                                 <div class="timeline-footer" style="text-align: right; ">
	                                	<span class="time"><i class="fa fa-clock-o"></i> <wf:datetime timestamp="${feedback.createdAt }" format="HH:mm:ss"></wf:datetime></span>
	                                </div>
                            </div>
                        </li>
                         </c:forEach>
                        
                        <li class="timeline-node">
                            <a class="btn btn-palegreen" id="timePoint">
                            	
                            </a>
                        </li>
                        <li class="timeline-inverted">
                            
                            <div class="timeline-badge bg-orange">
                                <i class="fa fa-envelope"></i>
                            </div>
                            <div class="timeline-panel bordered-top-3 bordered-orange">
                                <div class="timeline-header bordered-bottom bordered-orange">
                                    <span class="timeline-title">
                                        物业回复 ：
                                    </span>
                                    
                                </div>
                                <div class="timeline-body">
                                          <div class="row">
                                              <div class="col-sm-12">
                                                    <div class="form-group">
                                                         <span class="input-icon icon-right">
                                                                <textarea class="form-control" rows="10" id="content"></textarea>
                                                                     <i class="glyphicon glyphicon-briefcase darkorange"></i>
                                                         </span>
                                                   </div>
                                                  <input type="hidden" name="receiveId" id="receiveId"  />
                                             </div>
                                         </div>   
                                         <div style="text-align: right;">
                                         	<button type="button" class="btn btn-primary" onclick="feedback()">回 复</button>
                                         </div>        
                                </div>
                            </div>
                        </li>
                    </ul>
                 </div>
                	 
                </div><!-- /Page Body -->
             </div><!-- /Page Content -->
     	</div><!-- /Page Container -->
     </div><!-- /Main Container -->
     	<script src="${pageContext.request.contextPath}/resource/assets/js/jquery-2.0.3.min.js"></script>
    <script src="${pageContext.request.contextPath}/resource/assets/js/bootstrap.min.js"></script>

    <!--Beyond Scripts-->
    <script src="${pageContext.request.contextPath}/resource/assets/js/beyond.min.js"></script>
    <script type="text/javascript">
    	$('.loading-container').hide();
    	$('#timePoint').text(CurentTime());
    	$('#menu_complain').addClass("active open");
		$('#menu_complainlist').addClass("active");
		var complainId= "${complain.objectId}";
    	function feedback(){
    		var content = $('#content').val();
    		if ($.trim(content) == "") {
				return;
			}
    		$('.loading-container').show();
    		
    		location.href="${pageContext.request.contextPath}/complain_proFeedback?complainId="+complainId+"&content="+content;
    		
    	}
    </script>
</body>
</html>